<template>
    <div class="select3">
      <div class="header">
        <router-link to="/mian/0">
          <img src="/static/lyl/zuojian.png" alt="">
        </router-link>
        <span>分类</span>
        <span @click="chuan2()">
          <router-link to="/mian/1">确定</router-link>
        </span>
      </div>
      <ul>
        <li :class="{activ:item.bols}" @click="chan(index)" v-for="(item,index) in data3">{{item.tit}} <img v-if="item.bols" src="/static/lyl/duihao.png" alt=""></li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "Xuan2",
      data(){
        return {
          data3:[
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false},
            {tit:'名牌包包',bols:false},
            {tit:'洁面护理',bols:false},
            {tit:'人气口红',bols:false}
          ]
        }
      },
      methods:{
        chan(i){
          this.data3[i].bols = !this.data3[i].bols;
        },
        chuan2(){
          for (var i = 0; i < this.data3.length; i++) {
            if (this.data3[i].bols) {
              this.$store.commit('tianjia',this.data3[i]);
            }
          }
        }
      }
    }
</script>

<style scoped>
  .select3{
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    width: 56rem;
    height: 143rem;
  }
  .header{
    padding: 3rem 2rem;
    background: #f2f2f2;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .header img{
    width: 2rem;
    height: 3.8rem;
  }
  .header span{
    font-family: '微软雅黑';
    font-size: 36px;
    color: #4d4d4d;
  }
  .select3 ul{
    padding: 0 2rem;
  }
  .select3 ul li{
    position: relative;
    border-bottom: 1px solid #ccc;
    font-size: 28px;
    line-height: 36px;
    padding: 1.5rem 0;
  }
  .select3 ul li>img{
    position: absolute;
    right: 0;
    width: 2.5rem;
  }
  .activ{
    color: #e53e42;
  }
</style>
